import React, { useState, useEffect, useContext } from 'react'
import dayjs from 'dayjs'
import Echarts from '&/baseUI/EChartsUI'
import { ActivityLevelContext } from '../context'
const CityElectricity = () => {
  const [option1, setOption1] = useState()
  const { type, allCity } = useContext(ActivityLevelContext)
  useEffect(() => {
    if (!allCity) return
    let xData = []
    let series1 = []
    let series2 = []
    let series3 = []
    let format =
      type == 2
        ? 'MM' + '月' + 'DD' + '日' + 'HH' + '时'
        : 'MM' + '月' + 'DD' + '日'
    allCity.map((i) => {
      if (
        i.data != -99 &&
        i.data_change_percentage != -99 &&
        i.standard_value != -99
      ) {
        xData.push(dayjs(i.data_time).format(format))
        series1.push(i.data)
        series2.push(Math.round(i.data_change_percentage))
        series3.push(i.standard_value)
      }
    })
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      title: { text: '全市用电量变化', right: '50%' },
      legend: {
        data: ['全市用电量', '日变化率', '基准值'],
        top: '5%',
        right: '10%',
        textStyle: {
          fontSize: 15
        }
      },
      grid: {
        left: '4%',
        right: '5%',
        bottom: '0%',
        containLabel: true,
        show: true,
        borderColor: 'rgb(220,220,220)'
      },
      toolbox: {
        feature: {
          saveAsImage: {
            title: '保存为图片'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLabel: {
          rotate: 50,
          color: 'rgb(129,129,129)',
          margin: 20
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgb(220,220,220)'
          }
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: 'rgb(220,220,220)'
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '全市用电量(kw·h)',
          nameLocation: 'middle',
          nameGap: 70,
          nameTextStyle: {
            fontSize: 15
          },
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          position: 'right',
          name: '用电量日变化率(%)',
          nameLocation: 'middle',
          nameGap: 70,
          nameTextStyle: {
            fontSize: 15
          },
          axisLabel: {
            formatter: `{value}` + '%'
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '全市用电量',
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            color: 'rgb(0,32,96)'
          },
          data: series1
        },
        {
          name: '日变化率',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            color: 'rgb(254,192,4)'
          },
          label: {
            show: true,
            formatter: `{c}` + '%'
          },
          data: series2
        },
        {
          name: '基准值',
          type: 'line',
          // yAxisIndex: 2,
          itemStyle: {
            color: 'rgb(254,192,4)'
          },
          // label: {
          //   show: true,
          //   formatter: `{c}` + '%'
          // },
          data: series3
        }
      ]
    }
    setOption1(option)
  }, [allCity])
  return (
    <div className="CityElectricity">
      <Echarts option={option1} />
    </div>
  )
}
export default CityElectricity
